<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue component细节点</title>
    <script charset="UTF-8" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--使用is解决固定形式DOM渲染问题-->
    <!--<table>-->
        <!--<tbody>-->
            <!--<tr is="row"></tr>-->
            <!--<tr is="row"></tr>-->
            <!--<tr is="row"></tr>-->
        <!--</tbody>-->
    <!--</table>-->
    <!--子组件定义data的方式-->
    <!--<table>-->
        <!--<tbody>-->
            <!--<tr is="row"></tr>-->
            <!--<tr is="row"></tr>-->
            <!--<tr is="row"></tr>-->
        <!--</tbody>-->
    <!--</table>-->
    <!--获取Dom元素-->
    <!--<div ref="hello"-->
         <!--@click="handleClick">hello World</div>-->
    <!--单击求和-->
    <counter ref="one" @change="handleChang"></counter>
    <counter ref="two" @change="handleChang"></counter>
    <div>{{total}}</div>
</div>
<script>
    // 使用is解决固定形式DOM渲染问题
    // Vue.component('row',{
    //     template:'<tr><td>this is a row</td></tr>'
    // });
    // let vm = new Vue({
    //     el: '#app',
    // });
    // 子组件定义data的方式
    // Vue.component('row',{
    //     data:function(){
    //         return {
    //             content:"this is a content"
    //         }
    //     },
    //     template:'<tr><td>{{content}}</td></tr>'
    // });
    // let vm = new Vue({
    //     el: '#app',
    // });
    // 获取Dom元素
    // let vm = new Vue({
    //     el: '#app',
    //     methods:{
    //         handleClick:function () {
    //           alert(this.$refs.hello.innerHTML);
    //         }
    //     }
    // });
    
    // 单击求和
    Vue.component('counter',{
        template:'<div @click="handleClick">{{number}}</div>',
        data:function (){
            return {
                number:0
            }
        },
        methods:{
            handleClick:function () {
                this.number++;
                this.$emit("change");
            }
        }
    });
    let vm = new Vue({
        el: '#app',
        data:{
            total:0
        },
        methods:{
            handleChang:function () {
                this.total=this.$refs.one.number+this.$refs.two.number;
            }
        }
    });
</script>
</body>
</html>